<script setup lang="ts">
let alignItems = ref('stretch')
let justifyItems = ref('stretch')
let justifySelf = ref('stretch')
let alignSelf = ref('stretch')
let justifyContent = ref('stretch')
let alignContent = ref('stretch')
</script>

<template>
<div class="wrap">
  <div class="form">
    <h4>控制所有网格项目对齐方式：</h4>
    <div class="control">
      <label for="align-items">align-items</label>
      <select v-model="alignItems" name="align-items" id="align-items">
        <option value="start">start</option>
        <option value="end">end</option>
        <option value="center">center</option>
        <option value="stretch" selected>stretch</option>
      </select>
    </div>
    <div class="control">
      <label for="justify-items">justify-items</label>
      <select v-model="justifyItems" name="justify-items" id="justify-items">
        <option value="start">start</option>
        <option value="end">end</option>
        <option value="center">center</option>
        <option value="center">center</option>
        <option value="stretch" selected>stretch</option>
      </select>
    </div>
    <h4>控制单个网格项目的对齐方式</h4>
    <div class="control">
      <label for="justify-self">justify-self</label>
      <select v-model="justifySelf" name="justify-self" id="justify-self">
        <option value="start">start</option>
        <option value="end">end</option>
        <option value="center">center</option>
        <option value="stretch" selected>stretch</option>
      </select>
    </div>
    <div class="control">
      <label for="align-self">align-self</label>
      <select v-model="alignSelf" name="align-self" id="align-self">
        <option value="start">start</option>
        <option value="end">end</option>
        <option value="center">center</option>
        <option value="stretch" selected>stretch</option>
      </select>
    </div>
    <h4>控制网格轨道的对齐方式</h4>
    <div class="control">
      <label for="justify-content">justify-content</label>
      <select v-model="justifyContent" name="justify-content" id="justify-content">
        <option value="start" selected>start</option>
        <option value="end">end</option>
        <option value="center">center</option>
        <option value="stretch">stretch</option>
        <option value="space-around">space-around</option>
        <option value="space-evenly">space-evenly</option>
        <option value="space-between">space-between</option>
      </select>
    </div>
    <div class="control">
      <label for="align-content">align-content</label>
      <select v-model="alignContent" name="align-content" id="align-content">
        <option value="start" selected>start</option>
        <option value="end">end</option>
        <option value="center">center</option>
        <option value="stretch">stretch</option>
        <option value="space-around">space-around</option>
        <option value="space-evenly">space-evenly</option>
        <option value="space-between">space-between</option>
      </select>
    </div>
  </div>

  <section>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </section>
</div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrap {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1rem;


  .form {
    background: rosybrown;
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-column: 2;
    grid-row: 1;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.8);
    // 让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了能看到效果必须使用元素或者背景至少部分透明
    backdrop-filter: saturate(180%) blur(10px);

    .control {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 10px;
      align-items: center;

      label {
        white-space: nowrap;
        justify-self: end;
      }

      // + 选择器，选择紧跟在后面的兄弟元素
      & + h4 {
        border-top: 1px dashed currentColor;
        padding-top: 1rem;
        margin-top: 1rem;
      }
    }
  }
  section {
    grid-column: 1;
    grid-row: 1;

    font-family: "Bungee Shade", cursive;
    font-size: 1.2rem;
    display: flex;
    box-shadow: 0 0 0 6px rgb(217 210 10 / 9%);
    border-radius: 4px;
    margin: 2rem;
    align-self: start;

    .container {
      --width: 100%;
      --justify-items: v-bind(justifyItems);
      --align-items: v-bind(alignItems);
      --justify-self: v-bind(justifySelf);
      --align-self: v-bind(alignSelf);
      --align-content: v-bind(alignContent);
      --justify-content: v-bind(justifyContent);

      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(2, 120px auto);
      grid-auto-rows: 120px auto;
      grid-auto-flow: dense;
      place-items: var(--align-items) var(--justify-items);
      place-content: var(--align-content) var(--justify-content);

      inline-size: 100%;
      max-width: 50vw;
      margin: 0 auto;
      aspect-ratio: 1;

      width: var(--width);
      padding: 1rem;
      outline: 1px dashed #f36;
      counter-reset: item;

      .item {
        counter-increment: item;
        display: flex;
        justify-content: center;
        align-items: center;
        /*   min-height: 120px; */
        background-color: #2c6;
        color: #000;
        position: relative;

        &:nth-child(1) {
          background-color: #f196f3;
          background-image: repeating-conic-gradient(
                  from 7.5deg at 50% 0,
                  transparent 0 15deg,
                  #09f336 0 30deg
          ),
          linear-gradient(177deg, #f196f312, #f4433609);
          mix-blend-mode: overlay;
          background-blend-mode: screen;
          box-shadow: inset 0px 0px 0px 3px rgb(159 86 181 / 50%);
          text-shadow: 1px 1px 0 rgb(255 255 255 / 0.5);

          grid-row: span 2;
          grid-column: span 2;
          place-self: var(--align-self) var(--justify-self);
        }

        &:nth-child(2) {
          background-color: #dac2f1;
        }

        &:nth-child(3) {
          background-color: #ccf1c2;
        }

        &:nth-child(4) {
          background-color: #c2e9f1;
        }

        &:nth-child(5) {
          background-color: #90aeef;
        }

        &:nth-child(6) {
          background-color: #f44336;
        }

        &:nth-child(7) {
          background-color: #2196f3;
        }

        &:nth-child(8) {
          background-color: #f196f3;
        }

        &::before {
          content: counter(item);
          font-family: "Bungee Shade", cursive;
          font-size: 3.5rem;
        }
      }

    }
  }

}
</style>
